<!--
 * @Author: xuna
 * @Descripttion: 查看投票活动
-->
<template>
  <div>
    <el-drawer
      title="查看详情"
      :visible.sync="isOpenCheck"
      :direction="direction"
      size="40%"
      :before-close="beforeClose"
      class="draw-panel"
    >
      <div v-loading="loading" class="detail-wrap demo-ruleForm ">
        <div class="detail-label">基本信息</div>
        <div class="basic-detail">
          <img v-if="voteDetail.headImgs" :src="voteDetail.headImgs" alt="" />
          <div class="basic-info">
            <p class="basic-status">
              <span>
                【{{
                  voteDetail.activityStatus == 0
                    ? '未开始'
                    : voteDetail.activityStatus == 1
                    ? '进行中'
                    : voteDetail.activityStatus == 2
                    ? '已结束'
                    : '已过期'
                }}】
              </span>
              {{ voteDetail.voteTitle }}
            </p>
            <p class="explain">{{ voteDetail.voteExplain }}</p>
            <p class="label-tip ">
              截止时间：
              <span>{{ voteDetail.voteEndTime }}</span>
            </p>
            <p class="label-tip ">
              投票人数：
              <span>{{ checkRow.joinCount }}/{{ checkRow.shareCount }}</span>
            </p>
          </div>
          <el-button
            class="primary-btn"
            type="primary"
            :disabled="voteDetail.activityStatus > 1"
            @click="onSelectUsersBtnClick"
          >
            发送薪友
          </el-button>

          <!-- <span
            class="send-btn"
            :class="{ 'default-btn': voteDetail.activityStatus != 1 }"
            @click="onSelectUsersBtnClick"
          >
            发送薪友
          </span> -->
        </div>
        <div class="option-info">
          <div v-for="(item, index) in voteDetail.optionList" :key="index" class="option-col">
            <!-- <span>选项{{ index + 1 }}</span> -->
            <span>{{ item.serialNumber }}</span>
            <span class="option">{{ item.voteOption }}</span>
            <el-progress
              :percentage="Number(item.proportion) * 100"
              class="progress-col"
            ></el-progress>
            <span>{{ item.activityVoteNumber }}票</span>
          </div>
        </div>
        <div class="detail-label">其他设置</div>
        <div class="activity-detail">
          <p class="label-tip">
            投票选项：
            <span>{{ voteDetail.voteOption == 1 ? '单选投票' : '多选投票' }}</span>
          </p>
        </div>
        <div class="detail-label">
          已投票
          <span>已有 {{ checkRow.joinCount }}人投票</span>
        </div>
        <div class="sign-detailinfo">
          <!-- :class="{ 'default-btn': voteDetail.userList.length == 0 }" -->
          <span class="send-btn" @click="exportList">
            导出
          </span>
          <el-table :data="voteDetail.userList" stripe style="width: 100%;">
            <el-table-column prop="realName" label="姓名" width="180"></el-table-column>
            <el-table-column prop="mobilePhone" label="手机号" width="180"></el-table-column>
            <el-table-column prop="voteOptions" label="投票选项"></el-table-column>
            <el-table-column prop="createTime" label="提交时间"></el-table-column>
          </el-table>
        </div>
      </div>
    </el-drawer>
    <select-users ref="selectUsers" :title="selectTip" @on-ok="onSelectedUsers" />
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import { checkVoteDetail, voteExptUserList, voteSentTickets } from '@/api/votesign';
  import { downloadBlob } from '@/utils/download';
  import SelectUsers from './SelectUsers';
  export default {
    components: {
      SelectUsers,
    },
    props: {
      checkRow: {
        type: Object,
        default() {
          return {};
        },
      },
      isOpenCheck: {
        type: Boolean,
        required: true,
      },
    },
    data() {
      return {
        direction: 'rtl',
        optionLot: [],
        voteDetail: { userList: [] },
        isOpenSelect: false,
        selectTip: '投票',
        loading: false,
      };
    },
    computed: {
      ...mapGetters('user', ['userInfo']),
      organizationId() {
        return this.userInfo.organId;
      },
    },
    watch: {
      checkRow(newDtat, oldData) {
        console.log(newDtat, oldData, '-------------eee---');
        if (!this.isOpenCheck) return;
        this.initDetail();
      },
    },

    activated() {},
    methods: {
      initDetail() {
        this.loading = true;
        try {
          checkVoteDetail({ id: this.checkRow.id }).then(res => {
            this.loading = false;
            if (res.status == 200) {
              console.log(res);
              this.voteDetail = res.data;
              let data = res.data;
              if (data.userList.length) {
                this.voteDetail.userList = data.userList.map(val => {
                  val.voteOptions = val.voteOptions.join(',');
                  return val;
                });
              }
            }
          });
        } catch (error) {
          this.loading = false;
        }
      },
      beforeClose() {
        this.$emit('closeDrawer', false);
      },
      exportList() {
        voteExptUserList({ id: this.checkRow.id }).then(res => {
          var blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' });
          downloadBlob(blob, res.fileName || '投票人员名单.xls');
        });
      },
      onSelectUsersBtnClick() {
        if (this.voteDetail.activityStatus > 1) return;
        this.$refs['selectUsers'].show(this.organizationId);
      },

      onSelectedUsers(list) {
        console.log(list, '------------');
        if (list.length > 0) {
          let userList = [];
          list.map(val => {
            userList.push(val.userId);
          });
          let objData = {
            id: this.checkRow.id,
            userList,
          };
          console.log(objData);
          try {
            voteSentTickets(objData).then(res => {
              if (res.status == 200) {
                this.initDetail();
                this.$emit('refreshData', true);
                this.$message({
                  type: 'success',
                  message: '发送成功!',
                });
              }
            });
          } catch (error) {}
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import '~@/styles/mixin.scss';
  /deep/ .el-drawer__body {
    padding-left: 20px;
  }
  .draw-panel {
    /deep/.el-drawer {
      border-radius: 14px 0 0 14px;
    }
    /deep/.el-drawer__header {
      display: flex;
      align-items: center;
      @include font(16px, #34363b, bold);
      height: 60px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 1px 12px 0px rgba(194, 194, 198, 0.31);
      padding: 0 0 0 14px;
      margin-bottom: 0;
    }
    /deep/.el-drawer__body {
      padding: 0;
      box-sizing: border-box;
      overflow-y: auto;
      position: relative;
    }
    .detail-label {
      @include wh(100%, 51px);
      background-color: #f7f6f9;
      display: flex;
      align-items: center;
      @include font(14px, #6d6e6e, 800);
      padding-left: 14px;
      box-sizing: border-box;
      span {
        @include font(13px, #464649, 400);
        margin-left: 10px;
      }
    }
    .demo-ruleForm {
      width: 100%;
      .primary-btn {
        margin-top: 10px;
      }
      .send-btn {
        @include wh(94px, 36px);
        @include font(14px, #fff, 800);
        background: #3771e9;
        border-radius: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
        cursor: pointer;
        &.default-btn {
          color: #e8e4e8;
          background-color: #fff;
          border: 1px solid #e8e4e8;
        }
      }
      .label-tip {
        @include font(13px, #7f848b, 400);
        span {
          @include font(14px, #1e2023, 400);
        }
      }
      .basic-detail {
        padding: 14px 16px 16px;
        box-sizing: border-box;
        border-bottom: 1px solid #efeff0;
        > img {
          @include wh(262px, 118px);
          border-radius: 7px;
        }

        .basic-info {
          p {
            margin-bottom: 16px;
            &:last-of-type {
              margin: 0;
            }

            &.basic-status {
              @include font(16x, #1e2023, 600);
              margin-bottom: 14px;
              white-space: normal !important;
              word-break: break-all !important;
              word-wrap: break-word !important;
              span {
                @include font(16x, #3770eb, 800);
              }
            }
            &.explain {
              @include font(13px, #7f848b, 400);
              white-space: normal !important;
              word-break: break-all !important;
              word-wrap: break-word !important;
            }
          }
        }
      }
      .option-info {
        padding: 13px 50px 16px 0;
        box-sizing: border-box;
        .option-col {
          display: flex;
          margin-bottom: 12px;
          .option {
            width: 35%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .progress-col {
            margin: 0 10px 0 30px;
            width: 50%;
            height: 10px;
            /deep/.el-progress-bar,
            /deep/.el-progress-bar__outer {
              height: 10px !important;
            }
            /deep/.el-progress__text {
              font-weight: 12px !important;
              color: #3d75e5;
            }
          }
          span {
            @include font(14x, #1e2023, 400);
            margin-left: 10px;
          }
        }
      }
      .activity-detail {
        background-color: #fff;
        height: 64px;
        padding: 14px 18px;
        box-sizing: border-box;
      }
      .sign-detailinfo {
        padding: 14px 16px 65px;
        box-sizing: border-box;
        span {
          margin: 0 0 13px;
        }
      }
    }
  }
</style>
